import React, { useEffect, useState } from 'react'

export default function Test(props) {
  console.log('Test里面的代码执行了')
  const [msg, setMsg] = useState('hello')
  const [x, setX] = useState(0)
  // 1.不写第二个参数:  外层函数模拟挂载和更新,内部函数模拟卸载. 但是在更新之前会先执行一次内部函数
  // 2. 写了第二个参数是空数组: 外层函数只模拟挂载,内部函数模拟卸载(常用).
  // 3. 写了第二个参数,数组中监听了数据,则监听的数据发生变化,外层函数就模拟更新,监听的数据没有发生变化,则外层函数不模拟更新
  useEffect(() => {
    // 外层函数模拟挂载和更新
    console.log('Test组件挂载或更新了')

    // const id = Pubsub.subscribe('话题',回调)
    return () => {
      // 内部函数模拟卸载
      console.log('Test组件即将卸载')
      //   PubSub.unsubscribe(id)
    }
  }, [msg, x, props.count])
  return (
    <div>
      Test,{msg},{x}
      <button
        onClick={() => {
          setMsg('hello HOOK')
        }}
      >
        修改msg
      </button>
      <button
        onClick={() => {
          setX(x + 1)
        }}
      >
        修改x
      </button>
    </div>
  )
}
